import './Twli.css'
import React, {
    Component,
    Fragment
} from 'react'

export default class Twli extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: [
                {
                    id: 1,
                    name: "可乐",
                    itemse: [{
                        id: 4,
                        text: "冷冻可乐",
                        arr3: [{
                            text: '农夫山泉'
                        }, {
                            text: '农夫山泉'
                        }]
                    }, {
                        id: 5,
                        text: "香草可乐",
                        arr3: [{
                            text: '农夫山泉'
                        }, {
                            text: '农夫山泉'
                        }]
                    },],

                },

                {
                    id: 2,
                    name: "雪碧",
                    itemse: [{
                        id: 6,
                        text: "冷冻雪碧",
                        arr3: [{
                            text: '农夫山泉'
                        }, {
                            text: '农夫山泉'
                        }]
                    }, {
                        id: 7,
                        text: "青柠雪碧",
                        arr3: [{
                            text: '农夫山泉'
                        }, {
                            text: '农夫山泉'
                        }]
                    },],

                }, {
                    id: 3,
                    name: "橙子",
                    itemse: [{
                        id: 8,
                        text: "冷冻橙子",
                        arr3: [{
                            text: '农夫山泉'
                        }, {
                            text: '农夫山泉'
                        }]
                    }, {
                        id: 9,
                        text: "新鲜橙子",
                        arr3: [{
                            text: '农夫山泉'
                        }, {
                            text: '农夫山泉'
                        }]
                    },
                    ],
                }]
        }
    }

    render() {
        return (
            <Fragment>
                <div>
                    <ul>
                        {this.state.items.map(item => (<li key={item.id}>
                            {item.name}
                            <ul>
                                {item.itemse.map(item1 => (<li key={item1.id}>{item1.text}
                                    <ul>{item1.arr3.map((item2, index) => (<li key={index}>{item2.text}</li>))}</ul>
                                </li>))
                                }
                            </ul>
                        </li>))}
                    </ul>
                </div>
            </Fragment>
        )
    }
}
